<template>
  <div class="email-inbox">
    <h1>我的邮箱</h1>
    <div class="email-list">
      <div class="email-item" v-for="(email, index) in emails" :key="index" :class="{ 'unread': email.unread }">
        <div class="email-header">
          <input type="checkbox" class="email-checkbox" />
          <h2>{{ email.subject }}</h2>
          <p><strong>发件人:</strong> {{ email.from }}</p>
          <p><strong>日期:</strong> {{ email.date }}</p>
        </div>
        <div class="email-body">
          <p>{{ email.body.substring(0, 100) }}...</p>
          <div class="email-actions">
            <button @click="markAsRead(email, index)">标记为已读</button>
            <button @click="deleteEmail(email, index)">删除</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EmailInbox",
  data() {
    return {
      emails: [
        // 更新邮件数据，添加unread属性
        {
          subject: "关于项目的最新进展",
          from: "John Doe <john.doe@example.com>",
          date: "2023-04-01",
          body: "亲爱的团队成员，这里是关于我们项目的最新进展报告...",
          unread: true
        },
        // 其他邮件...
      ]
    };
  },
  methods: {
    markAsRead(email, index) {
      // 这里只是简单地更改数据，实际中可能需要更新服务器状态
      this.$set(this.emails, index, { ...email, unread: false });
    },
    deleteEmail(email, index) {
      // 简单的删除操作，实际中需要处理更多逻辑
      this.emails.splice(index, 1);
    }
  }
}
</script>

<style scoped>
/* 样式更新 */
.email-inbox {
  /* ... */
}

.email-item {
  /* ... */
  position: relative; /* 为操作按钮定位做准备 */
}

.email-item.unread {
  background-color: #f9f9f9; /* 未读邮件的背景色 */
}

.email-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.email-checkbox {
  margin-right: 10px;
}

.email-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
}

.email-actions button {
  margin-left: 5px;
}
div{
  width: auto;
}
</style>
